<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./lib/nprogress/nprogress.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>Document</title>
</head>

<body>
    <div class="lt-index">
        <!-- 侧边栏 -->
        <div class="lt-sidebar">
            <a href="index.html" class="gohome">我想回家!!</a>
            <img src="./images/default.png" alt="">
            <p>超级管理员</p>
            <!-- 导航 -->
            <ul class="lt-nav">
                <li><span class="glyphicon glyphicon-user"> </span> <a href="user.html"> 用户管理</a></li>
                <li class="category">
                    <span class="glyphicon glyphicon-list"> </span><a href="#"> 分类管理</a>
                    <div class="child" style="padding-left: 0;">
                        <a href="first.html">一级分类</a><br>
                        <a href="second.html" class="current" style="background-color: #1D1F21;
                        border-left: 3px solid #006699; display:block">二级分类</a>
                    </div>
                </li>
                <li><span class="glyphicon glyphicon-tags"> </span><a href="product.html"> 商品管理</a></li>
            </ul>
        </div>
        <div class="lt-subject">
            <!-- 头部 -->
            <div class="lt-header">
                <span class="glyphicon glyphicon-align-justify pull-left lt-menu"></span>
                <span class="glyphicon glyphicon-log-out pull-right" data-toggle="modal" data-target="#myModal"></span>

            </div>
            <!-- 主体 -->
            <div class="container-fluid">
                <div class="lt-content">
                    <ol class="breadcrumb">
                        <li><a href="index.html">管理系统</a></li>
                        <li class="active">分类管理</li>
                        <li class="active">二级分类</li>
                    </ol>
                    <button type="button" class="btn btn-default" style="margin-bottom: 20px;outline: none; " id="addModal"
                        data-toggle="modal" data-target=".bs-example-modal-sm">
                        添加分类</b-tton>
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th width="15%">序号</th>
                                <th width="30%">一级分类名称</th>
                                <th width="30%">二级分类名称</th>
                                <th width="25%">二级分类LOGO</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 刨个坑 -->
                        </tbody>
                    </table>
                    <!-- 分页dom结构 -->
                    <div class="pull-right">
                        <ul id="paginator"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -->
    <!-- Small modal -->
    <div class="modal fade bs-example-modal-sm" id="aaModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加分类</h4>
                </div>
                <div class="modal-body">
                    <!-- 下拉菜单 -->
                    <form id="form">
                        <!-- 一级分类下拉 -->
                        <div class="form-group">
                            <div class="dropdown">
                                <button id="dLabel" type="button" data-toggle="dropdown" class="btn btn-default">
                                    <span class="cate-text">请选择一级分类</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu cate-list">
                                    <li><a href="#">xx馆</a></li>
                                    <li><a href="#">xx馆</a></li>
                                    <li><a href="#">xx馆</a></li>
                                </ul>
                            </div>
                            <input type="hidden" name="categoryId" class="categoryId">
                        </div>
                        <!-- 二级分类名称 -->
                        <div class="form-group">
                            <input type="text" name="brandName" class="form-control" placeholder="请输入二级分类名称">
                        </div>
                        <!-- 分类logo -->
                        <div class="form-group">
                            <label for="file" class="btn btn-default">上传图片</label>
                            <!-- 
                                    当文件域选中文件后，会立即上传，要先通过data-url指定上传的地址
                                    mutiple 用于多文件上传
                                    data-url 指定服务器提交图片地址
                                 -->
                            <input type="file" name="pic1" id="file" data-url="/category/addSecondCategoryPic" style="display: none">
                        </div>
                        <div class="form-group">
                            <img src="./images/default.png" class="logo" width="80" alt="">
                            <!-- 添加二级分类需要用图片地址 -->
                            <input type="hidden" name="brandLogo" class="hide-logo">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" form="form">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 退出模态框 -->
    <div class="modal fade" tabindex="-1" id="myModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">温馨提醒</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要退出吗</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary  lt-quit">退出</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <script type="text/html" id="tmp">
        {{ each rows v i }}
            <tr>
                <td>{{ i + 1 + (page-1) * size }}</td>
                <td>{{ v.categoryName}}</td>
                <td>{{ v.brandName }}</td>
                <td><img src="{{ v.brandLogo}}" height="50" alt=""></td>
            </tr>   
        {{ /each }}
    </script>
    <script type="text/html" id="tmp-cate">
        {{ each rows v i }}
            <li><a href="#" data-id={{ v.id }}>{{ v.categoryName }}</a></li>
        {{ /each }}
    </script>
    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/bootstrap-paginator/bootstrap-paginator.js"></script>
    <script src="./lib/nprogress/nprogress.js"></script>
    <script src="./lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./lib/jquery-fileupload/jquery.ui.widget.js"></script>
    <script src="./lib/jquery-fileupload/jquery.fileupload.js"></script>
    <script src="./js/isLogin.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/second.js"></script>
</body>

</html>